<template>
	<view class="wrap">
		<view class="content">
			<view class="title">欢迎登录uni-base</view>
			<input class="u-border-bottom" type="number" v-model="tel" placeholder="请输入手机号" />
			<view class="tips">未注册的手机号验证后自动创建账号</view>
			<button @click="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button>
			<view class="alternative">
				<view class="password">密码登录</view>
				<view class="issue">遇到问题</view>
			</view>
			<template v-if="includesArr(providerList, 'weixin')">
				<u-divider margin-top="20" margin-bottom="20">建议使用微信登录</u-divider>
				<view class="btn-wrapper">
					<u-button type="success" open-type="getUserInfo" @getuserinfo="wxGetUserInfo">
						<u-icon size="50" name="weixin-fill"></u-icon>
						<text style="margin-left: 5rpx;">微信一键登录</text>
					</u-button>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			providerList: [],
			tel: ''
		};
	},
	computed: {
		inputStyle() {
			let style = {};
			if (this.tel) {
				style.color = '#fff';
				style.backgroundColor = this.$u.color['warning'];
			}
			return style;
		}
	},
	watch: {},
	onLoad() {
		this.initProvider();
	},
	methods: {
		includesArr(arr, val) {
			return arr.includes(val);
		},
		initProvider() {
			const filters = ['weixin', 'qq', 'sinaweibo'];
			uni.getProvider({
				service: 'oauth',
				success: res => {
					if (res.provider && res.provider.length) {
						this.providerList = [...res.provider];
					}
				},
				fail: err => {
					console.error('获取服务供应商失败：' + JSON.stringify(err));
				}
			});
		},
		// 微信登录
		async wxGetUserInfo(infoRes) {
			if (!infoRes.detail.userInfo) {
				this.$common.showToast('您已拒绝授权');
				return;
			}
			try {
				let userInfo = infoRes.detail.userInfo;
				console.log(infoRes);
				await this.$store.dispatch('user/login', {
					username: userInfo.nickName
				});
				this.$common.showToast({
					msg: '登录成功',
					success() {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				});
			} catch (e) {
				//TODO handle the exception
				this.$common.showToast(e.message);
			}
		},
		submit() {
			if (this.$u.test.empty(this.tel)) return;
			if (this.$u.test.mobile(this.tel)) {
				uni.navigateTo({
					url: '/pages/login/code'
				});
			} else {
				this.$common.showToast('手机号码不正确');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	font-size: 28rpx;
	.content {
		width: 600rpx;
		margin: 80rpx auto 0;

		.title {
			text-align: left;
			font-size: 60rpx;
			font-weight: 500;
			margin-bottom: 100rpx;
		}
		input {
			text-align: left;
			margin-bottom: 10rpx;
			padding-bottom: 6rpx;
		}
		.tips {
			color: $u-type-info;
			margin-bottom: 60rpx;
			margin-top: 8rpx;
		}
		.getCaptcha {
			background-color: rgb(253, 243, 208);
			color: $u-tips-color;
			// background-color: $custom-theme;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;

			&::after {
				border: none;
			}
			&.active{
				color: $u-tips-color;
				background-color: $custom-theme;
			}
		}
		.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}
	.btn-wrapper {
	}
}
</style>
